<template>
  <div class="body-project">
    <div class="project-title">项目统计</div>
    <div id="project" ref="project"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
import { getProject } from '@/api/home/index.js';
export default {
  name: 'project',
  components: {},
  data() {
    return {
      data: [],
      xAxis: [],
    };
  },
  computed: {},
  created() {
    // if (process.client){}
  },
  mounted() {
    // this.init();
    this.getProject();
  },
  beforeCreate() { },
  beforeMount() { },
  methods: {
    init() {
      let dom = echarts.init(this.$refs.project);
      // [0, 1, 1, 1, 1, 1, 18, 24, 27, 28, 30, 56];
      let data = this.data || [0, 1, 1, 1, 1, 1, 18, 24, 27, 28, 30, 56];
      let total = 0;
      let bgData = [];
      data.forEach((item) => {
        total += item;
      });
      data.forEach((item) => {
        bgData.push(total);
      });
      // data.reverse();
      let xData = this.xAxis || [
        '新洲区',
        '黄陂区',
        '汉南区',
        '东西湖区',
        '蔡甸区',
        '江夏区',
        '青山区',
        '江岸区',
        '武昌区',
        '汉阳区',
        '硚口区',
        '洪山区',
      ];
      // xData.reverse();
      let option = {
        grid: {
          top: '12%',
          left: '10%',
          right: '10%',
          bottom: '12%',
          // containLabel: true,
        },
        color: ['#DADEDE'],
        // dataZoom: [
        //   {
        //     type: 'inside',
        //     start: 0,
        //     end: 50,
        //     yAxisIndex: 0,
        //   },
        // ],
        xAxis: {
          type: 'category',
          // boundaryGap: [0, 0.01],
          splitLine: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255, 255, 255, 0.14)',
            },
          },
          axisLabel: {
            color: 'rgba(255, 255, 255, 0.6)',
          },

          data: xData,
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: 'rgba(255, 255, 255, 0.6)',
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            //show: false,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255, 255, 255, 0.14)' //里面横着的虚线
            }
          },
          axisLine: {
            show: false,
          },

        },
        series: [
          {
            // name: '2011',
            type: 'bar',
            data: data,
            barWidth: 20,
            itemStyle: {
              barBorderRadius: 7.5,
            },
            label: {
              show: true,
              position: 'top',
              color: 'rgba(255, 255, 255, 0.6)',
              distance: 10,
            },
          },
          // {
          //   // name: '2011',
          //   type: 'bar',
          //   data: bgData,
          //   barWidth: 20,
          //   barGap: '-100%',
          //   itemStyle: {
          //     // barBorderRadius: 7.5,
          //     color: 'rgba(140,140,140,0.1)',
          //   },
          //   label: {
          //     show: false,
          //   },
          // },
        ],
      };
      dom.setOption(option);
      addEventListener('resize', function () {
        dom.resize();
      });
    },
    async getProject() {
      const res = await getProject();
      if (res.code == 200) {
        this.data = [];
        this.xAxis = [];
        res.data.forEach((item) => {
          this.data.push(item.count);
          this.xAxis.push(item.name);
        });
        this.init();
      }
    },
  },
};
</script>
<style lang='scss' scoped>
// @import './css/index.scss';

.body-project {
  height: 100%;

  .project-title {
    height: 60px;
    line-height: 60px;
    margin-left: 30px;
    background: linear-gradient(180deg, #eefaff 0%, #5c899f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 17px;
    font-weight: 600;
  }

  #project {
    height: calc(100% - 60px);
  }
}
</style>